import React, { useEffect, useState } from "react";
import { Space, Table, Input, Button, Form, Modal } from "antd";
import type { ColumnsType } from "antd/es/table";
import "../../../../styles/Gml/kqzgl.scss";
import * as qq from "../../../../api/Gml/agm";
import { Outlet, useNavigate } from "react-router-dom";
interface P {}
const { Search } = Input;
function AttendanceGroupManage(props: P) {
  const [form] = Form.useForm();

  const columns = [
    {
      title: "考勤组名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "考勤组人数",
      dataIndex: "num",
      key: "num",
    },
    {
      title: "考勤组类型",
      dataIndex: "type",
      key: "type",
    },
    {
      title: "考勤组时间",
      dataIndex: "time",
      key: "time",
    },
    {
      title: "更新时间",
      dataIndex: "updatetime",
      key: "updatetime",
      render: (_: any, record: any) => <a>{new Date().toLocaleString()}</a>,
    },
    {
      title: "负责人",
      dataIndex: "people",
      key: "people",
    },
    {
      title: "操作",
      key: "action",
      render: (_: any, row: any) => (
        <Space size="middle">
          <a
            onClick={() => {
              addYg("banji", row);
            }}
          >
            编辑
          </a>
          <a
            onClick={() => {
              DeleteData(row);
            }}
          >
            删除
          </a>
          <Modal
            title="确认删除吗？"
            open={isModalOpen}
            onOk={() => {
              handleOk(row);
            }}
            onCancel={handleCancel}
            okText="确定"
            cancelText="取消"
          >
            <p>删除后不可恢复，请确认</p>
          </Modal>
        </Space>
      ),
    },
  ];

  // const dataSource = [
  //   {
  //     key: '1',
  //     name: '胡彦斌',
  //     age: 32,
  //     address: '西湖区湖底公园1号',
  //   },
  //   {
  //     key: '2',
  //     name: '胡彦祖',
  //     age: 42,
  //     address: '西湖区湖底公园1号',
  //   },
  // ];
  var [dataSource, setdataSource] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  let [id, setId] = useState([]);
  //弹框确认删除
  const handleOk = async (row: any) => {
    //  console.log(row.id);//删除
    let res = await qq.kfzDelete({ id });
    qq.kqz().then((res: any) => {
      // console.log(res);
      list()
    });
    setIsModalOpen(false);
  };

  //取消删除
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  //点击删除
  var DeleteData = async (row: any) => {
    //删除时先提示
    setId(row.id);
    setIsModalOpen(true);
  };
let list =()=>{
  qq.kqz().then((res: any) => {
    console.log(res);
    let arr = res.data.map((v: any, i: any) => {
      return {
        key: i,
        id: v.id,
        name: v.name,
        num: v.num,
        type: v.type,
        time: v.time,
        people: v.people,
      };
    });
    setdataSource(arr)
  });
}
  //获取表格数据
  useEffect(() => {
    list()
  }, []);
  const onSearch = (value: string) => console.log(value);
  var navigate = useNavigate();

  //新增或者编辑
  var addYg = (type?: string, row?: any) => {
    if (type) {
      navigate(`/index/attendance/attendance_manage/xz`, {
        replace: false,
        state: row,
      });
    } else {
      navigate("/index/attendance/attendance_manage/xz");
    }
  };

  return (
    <div className="kqz">
      <h2 className="h2">考勤组管理</h2>
      <div className="box">
        <Search
          placeholder="请输入关键字"
          onSearch={onSearch}
          style={{ width: 400 }}
        />
        <Button
          type="primary"
          onClick={() => {
            addYg();
          }}
        >
          ＋新增考勤组
        </Button>
      </div>
      <Table dataSource={dataSource} columns={columns} />
    </div>
  );
}

export default AttendanceGroupManage;
